<script setup lang="ts">
import type { BannerItem } from '@/types/home';
import { ref } from 'vue'

const activeIndex = ref(0)
// 用于处理图片切换时轮播小黑点对应上切换的图
const handleChange: UniHelper.SwiperOnChange = (ev) =>{
        activeIndex.value = ev.detail!.current
}
// 点击轮播图后实现图片放大
const onPreviewImage = (url: string) => {
	const {list} = prop
	uni.previewImage({
		urls: list.map(item=>item.imgUrl),
		current: url
	})
}
interface Props {
        list: BannerItem[]
}
const prop = defineProps<Props>()
</script>

<template>
        <view class="carousel">
                <swiper :circular="true" :autoplay="false" :interval="3000" @change="handleChange">
                        <swiper-item v-for="item in list" :key="item.id">
                                <navigator url="/pages/index/index" hover-class="none" class="navigator">
                                        <image mode="aspectFit" class="image"
                                                :src="item.imgUrl" @tap="onPreviewImage(item.imgUrl)">
                                        </image>
                                </navigator>
                        </swiper-item>
                </swiper>
                <!-- 指示点 -->
                <view class="indicator">
                        <text v-for="(item, index) in list" :key="item.id" class="dot"
                                :class="{ active: index === activeIndex }"></text>
                </view>
        </view>
</template>

<style lang="scss">
@import '@/components/styles/FnSwiper.scss';
:host {
        display: block;
        height: 280rpx;
}


</style>